<template>
  <div id="OrderDetails">
    <section>
      <section style="width: 900px;zoom: 1;margin: 0 auto; margin-bottom">
        <el-row :gutter="24" style="padding-bottom: 28px;">
          <el-card shadow="always" style>
            <strong>订单信息</strong>
            <el-row>
              <el-col :span="15" style="    font-size: 14px;">
                订单号:
                <span>{{trade_no}}</span>
                <br />下单时间:
                <span>{{timestamp}}</span>
              </el-col>

              <el-col :span="9" style=" position: relative;top: -10px;">
                <dl>
                  <dt>
                    <span>总额：</span>
                    <div
                      style="display: initial;color: #FF7E44;font-size: 36px;border-bottom: 1px #FF7E44 dotted;"
                    >
                      <span class="y rmb">¥</span>
                      <span>{{count}}</span>
                    </div>
                  </dt>
                </dl>
              </el-col>
              <el-col :span="10" style="    position: relative;top: -25px;left: 36px;"></el-col>
            </el-row>
            <el-row :gutter="24"></el-row>
          </el-card>
        </el-row>
        <el-row :gutter="24" style="padding-bottom: 28px;">
          <el-card shadow="always">
            <strong>订单信息</strong>
            <h1 style="    font-size: 30px;margin-bottom: 15px;margin-top: 15px;   ">
              <span>{{MovieInfo.MovieName}}</span>
            </h1>
            <hr />
            <div>
              <dl class="item clearfix">
                <dt>座位{{ScheInfo.HallType}}</dt>
                <dd class="bed_name">
                  <span v-for="(item,index) in SeatCo.length" :key="index" v-if="index%2==0">
                    {{SeatCo[index]+"排"+SeatCo[index+1]+"座"}}
                    <el-divider direction="vertical"></el-divider>
                  </span>
                </dd>
              </dl>
              <dl class="item clearfix">
                <dt>时间</dt>
                <dd
                  class="bed_name"
                >{{ScheInfo.ScheInfo.StartTime.substring(0,10)}} {{ScheInfo.ScheInfo.StartTime.substring(11,16)}}开始，{{ScheInfo.ScheInfo.overTime.substring(11,16)}}结束</dd>
              </dl>
            </div>
          </el-card>
        </el-row>
       
        <el-row :gutter="24" style="padding-bottom: 28px;">
          <el-card shadow="always">
            <strong>发票信息</strong>
            <dl class="item clearfix">
              <dt>温馨提示</dt>
              <dd class="bed_name">请到电影院前台索取发票</dd>
            </dl>
          </el-card>
        </el-row>
        
      </section>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Seat: this.$cookies.get("seatArray"),
      ScheInfo: this.$cookies.get("Schedule"),
      SeatCo: [],
      trade_no: this.$route.query.trade_no,
      MovieInfo: null,
      count: this.$route.query.total_amount,
      UserInfo: this.$cookies.get("User"),
      timestamp: this.$route.query.timestamp
    };
  },
  created() {
    var SeatC = this.$cookies.get("SeatCo").split(",");
    var SeatS = [];
    for (var i = 0; i < SeatC.length; i++) {
      this.SeatCo.push(parseInt(SeatC[i]) + 1);
    }
    var SeatT = "";
    for (let i = 1; i <= this.SeatCo.length; i++) {
      SeatT += this.SeatCo[i - 1];
      if ((i % 2 == 0) & (i != this.SeatCo.length)) {
        SeatT += "=";
      } else if (i != this.SeatCo.length) {
        SeatT += ",";
      }
    }
    console.log(SeatT);
    this.Ajax.get(
      "api/MovieInfoes/GetMovieInfo/" + this.ScheInfo.ScheInfo.MovieID
    ).then(M => {
      this.MovieInfo = M.data;
    });

    this.Ajax.post("api/Schedule/UpDateScheSeat", {
      data: {
        Seat: this.Seat,
        id: this.ScheInfo.ScheInfo.ScheduleID
      }
    });
    this.Ajax.post("api/Order/AddOrder", {
      data: {
        ScheduleID: this.ScheInfo.ScheInfo.ScheduleID,
        Seat: SeatT,
        UserID: this.UserInfo.UserID,
        VIPPrice: this.count,
        TotalPrice: this.count,
        OrderTime:this.timestamp
      }
    });
  }
};
</script>
<style>
.item dt {
  float: left;
  font-size: 14px;
  width: 84px;
  text-align: justify;
  color: #616161;
}
.item .bed_name {
  font-size: 16px;
  line-height: 18px;
  position: relative;
  top: -2px;
  font-weight: bold;
}
.item .room {
  width: 78px;
  font-size: 30px;
  height: 46px;
  /* line-height: 46px; */
  background: #f8f8f8;
  border-radius: 2px;
  text-align: center;
}
.item .room .unit {
  font-size: 12px;
  margin-left: 6px;
}
.G_notice {
  padding: 15px 30px 30px 30px;
}
.G_notice .title {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}
.G_notice .infor:not(:last-of-type) {
  margin-bottom: 15px;
}
.G_notice .infor {
  font-size: 14px;
  line-height: 20px;
  color: #9e9e9e;
}
</style>